import { Input, Select, Button, Form, Toast, QuestionOutlined } from 'esy-ui';
import { Header } from '@/components';
import { useFormatText, useNavigation } from '@/hooks';
import { form_slt_com, form_iptarea_com } from '@/styles/esy-ui';
import { postUserSuggest } from '@/services';
import { useGlobalStore } from '@/mobx';

const FormItem = Form.Item;

const qustions = [
  {
    text: 'text_192',
    value: '1',
  },
  {
    text: 'text_193',
    value: '2',
  },
  {
    text: 'text_194',
    value: '3',
  },
  {
    text: 'text_195',
    value: '4',
  },
  {
    text: 'text_196',
    value: '5',
  },
  {
    text: 'text_197',
    value: '6',
  },
  {
    text: 'text_198',
    value: '7',
  },
  {
    text: 'text_199',
    value: '8',
  },
  {
    text: 'text_200',
    value: '9',
  },
  {
    text: 'text_201',
    value: '10',
  },
];

function Feedback() {
  const { text } = useFormatText();
  const navigation = useNavigation();
  const [form] = Form.useForm();
  const { changeState } = useGlobalStore();

  const toHK = () => {
    navigation('/feedback-list');
  };

  const onSubmit = () => {
    form
      .validate()
      .then((values: any) => {
        changeState('isLoading', true);
        if (Object.values(values).some((it) => !it)) {
          Toast.show({ content: text('text_88') });
          changeState('isLoading', false);
        } else {
          postUserSuggest({
            ...values,
            Title: '',
            MediaArray: '[]',
          })
            .then(() => {
              Toast.show({ content: text('text_129') });
              form.reset();
            })
            .catch(() => {})
            .finally(() => {
              changeState('isLoading', false);
            });
        }
      })
      .catch(() => {});
  };

  return (
    <div className='bg-white w-full h-full flex flex-col relative'>
      <div className='absolute right-0 top-0 text-white text-sm p-3' onClick={toHK}>
        {text('text_191')}
      </div>
      <Header title='text_40' />
      <div className='p-4'>
        <Form form={form}>
          {/* <div className='text-sm my-3'>
            {text('text_202')}
            <span className='text-error'>*</span>
          </div> */}
          {/* <FormItem name='Title'>
            <Input placeholder={text('text_203')} classNames={form_ipt_com_1} />
          </FormItem> */}

          <div className='my-3'>
            {text('text_188')}
            <span className='text-error'>*</span>
          </div>
          <FormItem className='mb-5' name='Type'>
            <Select
              placeholder={text('text_190')}
              classNames={form_slt_com}
              options={qustions.map((it) => ({ ...it, text: text(it.text) }))}
              prefix={<QuestionOutlined className='absolute left-3 text-split top-3' />}
            />
          </FormItem>

          <div className='my-3'>
            {text('text_189')}
            <span className='text-error'>*</span>
          </div>
          <FormItem className='mb-5' name='Describe'>
            <Input type='textarea' rows={10} placeholder={text('text_190')} classNames={form_iptarea_com} showMaxlength maxLength={200} />
          </FormItem>
          <Button className='rounded my-6' htmltype='submit' onClick={onSubmit}>
            {text('text_54')}
          </Button>
        </Form>
      </div>
    </div>
  );
}

export default Feedback;
